<template id='homeCard'>
    <div class="homeCard">
        <div class="top aCenter">
            <div class="topItem hiden" v-for="(item, index) in options.label" :key="index">{{ item }}</div>
        </div>
        <p class="center">{{ options.content }}</p>
        <div class="pcBottom">
            <p class="number">#<span>{{ options.seqNum }}</span></p>
            <p class="time">Created on <span>{{ trimDate(options.createtime) }}</span></p>
            <p class="from hiden">From <span>{{ options.source }}</span></p>
        </div>
        <div class="phoneBottom">
            <p class="number">#<span>{{ options.seqNum }}</span></p>
            <div class="times sCenter">
                <p class="time">Created on <span>{{ options.createtime }}</span></p>
                <div class="icon disCenter"> {{ sourceShorter(options.type) }}</div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'homeCard',
    components: {
    },
    props: {
        options: {
            type: Object
        },
    },

    // 定义属性
    data() {
        return {

        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        sourceShorter(val) {
            if (val == 1) {
                return 'W'
            } else if (val == 2) {
                return 'I'
            } else if (val == 3) {
                return 'B'
            } else {
                return 'A'
            }
        },
        //时间格式
        trimDate(time) {
            if (time) {
                let date = time.split(' ')[0];
                let year = date.split('-')[0];
                let month = date.split('-')[1];
                let day = date.split('-')[2];
                return day + '/' + month + '/' + year
            }
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.homeCard {
    cursor: pointer;
    width: 500px;
    height: 190px;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border: solid 1px #f5f5f5;
    padding: 15px 14px 9px 15px;
    display: flex;
    flex-direction: column;

    .top {
        .topItem {
            max-width: 100px;
            font-size: 12px;
            color: @tColor;
            margin-right: 14px;
        }

        .topItem:last-child {
            margin-right: 0;
        }
    }

    .center {
        margin-top: 10px;
        color: #575757;
        font-size: 13px;
        line-height: 18px;
        height: 126px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7; //行数
        -webkit-box-orient: vertical;
        font-family: Helvetica;
    }

    .pcBottom {
        display: flex;
        margin-top: auto;

        .number {
            color: rgba(194, 194, 194, 0.5);
            font-size: 12px;
        }

        .time {
            margin-left: 14px;
            margin-right: auto;
            font-size: 10px;
            color: #c2c2c2;
        }

        .from {
            color: #c2c2c2;
            font-size: 10px;
            max-width: 158px;

            span {
                font-family: Helvetica-Oblique;
            }
        }
    }

    .phoneBottom {
        display: none;
    }
}

.homeCard:hover {
    -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media screen and (max-width: 650px) {
    .homeCard {
        width: auto;
        height: 171px;
        padding: 11px 10px;

        .top {
            flex-wrap: wrap;

            .topItem {
                font-size: 14px;
                max-width: 91px;
                margin-bottom: 8px;
                margin-right: 7px;
            }
        }

        .center {
            margin-top: 0;
            height: 72px;
            -webkit-line-clamp: 5;
            line-height: 15px;
            font-size: 14px;
        }

        .pcBottom {
            display: none;
        }

        .phoneBottom {
            display: block;
            margin-top: auto;

            .number {
                color: rgba(194, 194, 194, 0.5);
                font-size: 12px;
            }

            .times {
                align-items: flex-end;

                .time {
                    color: #c2c2c2;
                    font-size: 10px;
                }

                .icon {
                    width: 19px;
                    height: 19px;
                    border: solid 1px rgba(168, 168, 168, 0.5);
                    color: #c2c2c2;
                    font-size: 10px;
                }
            }

        }
    }
}
</style>